<template>
	<view @clearAll="clearAllParams">
		<!-- <view class="fixed">当前已搜索到{{ total }}条数据</view> -->
		<uni-popup ref="popup" type="bottom" :is-mask-click="false"   >
			<view class="popupContent"  :style="{maxHeight: (scrollHeight +100) + 'px'}">
				<view class="title">高级查询</view>
				<view class="ul"   :style="{maxHeight: scrollHeight + 'px'}">
					<view class="li">
						<view class="left">主体名称：</view>
						<view class="right">
							<input type="text" placeholder="请输入主体名称" v-model="companyName"   :border="false"  style="font-size: 19rpx;margin-left: -10px;"
									  placeholder-style="color:#999999:font-size:19rpx" />
						</view>
					</view>
					<view class="li">
						<view class="left">食品类别：</view>
						<view class="right">
							<uni-data-select v-model="foodCategory" :localdata="foodCategoryList" :clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">认领状态：</view>
						<view class="right">
							<uni-data-select v-model="claimStatus" :localdata="claimStatusList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">抽样状态：</view>
						<view class="right">
							<uni-data-select v-model="sampleMode" :localdata="sampleModeList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">注销状态：</view>
						<view class="right">
							<uni-data-select v-model="logOffState" :localdata="logOffStateList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">覆盖状态：</view>
						<view class="right">
							<uni-data-select v-model="coverStatus" :localdata="coverStatusList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">年份：</view>
						<view class="right">
							<view class="input-container" style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
								<!-- <uni-datetime-picker  v-model="checkTimeDate" type="date"  :border="false"
								:clear-icon="false" /> -->
								<picker mode="selector" :range="years" :value="currentYearIndex" @change="bindPickerChange">
									<view class="picker">{{ selectedYear }}</view>
								</picker>
							</view> 
						</view>
					</view>
					<view class="li">
						<view class="left">操作开始日期：</view>
						<view class="right">
							<view class="input-container" style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
								<uni-datetime-picker  v-model="operationStartDate" type="date"  :border="false"
								:clear-icon="false" /> 
							</view> 
						</view>
					</view>
					<view class="li">
						<view class="left">操作结束日期：</view>
						<view class="right">
							<view class="input-container" style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
								<uni-datetime-picker  v-model="endDateOfOperationDate" type="date"  :border="false"
								:clear-icon="false" /> 
							</view> 
						</view>
					</view>
				</view>
				<view class="button">
					<button class="determine" @click="confirmBtn">确定</button>
					<button class="cancellation" @click="cancellation">取消</button>
				</view>
			</view>
		</uni-popup>
		<liu-calendar-date ref="calendar2" isRange  @checked='selectedDate'  ></liu-calendar-date>
	</view>
</template>

<script>
 
	export default {
		name: "CommonSearchCompont",
		props:{
			 showSearchCompont:{
				 default: false,
				 type:Boolean,
				 require:true
			 },
			 showTime:{
				default: false,
				type:Boolean,
				require:false
			 },
			 
		},
		data() {
			return {
				scrollHeight: 0 ,//弹窗高度
				// checkTimeStr:'',//检查日期
				companyName: '', //主体名称
				foodCategory: '', //食品类别
				foodCategoryList: [],
				claimStatus: '', //认领状态
				claimStatusList: [{
						value: '1',
						text: "未认领"
					},
					{
						value: '2',
						text: "已认领"
					}
				],
				sampleMode: '', //抽样状态
				sampleModeList: [{
						value: '1',
						text: "未抽样"
					},
					{
						value: '2',
						text: "已抽样"
					}
				],
				logOffState: '',  //注销状态
				logOffStateList: [{
						value: '1',
						text: "未注销"
					},
					{
						value: '2',
						text: "已注销"
					},
				],
				coverStatus: '', //覆盖状态
				coverStatusList: [{
						value: '1',
						text: "未覆盖"
					},
					{
						value: '2',
						text: "已覆盖"
					},
				],
				// checkTimeDate: '', //检查日期
				years: [],
				selectedYear: new Date().getFullYear(),
				currentYearIndex: 0,
				operationStartDate: '', //操作开始日期
				endDateOfOperationDate: '', //操作结束日期
			};
		},
		watch:{
			showSearchCompont(value,v){ 
				if(value){
					this.$refs.popup.open("bottom");
				}else{
					this.$refs.popup.close();
				}
			} 
		}, 
		created() {
		    const currentYear = new Date().getFullYear();
			for (let year = 1900; year <= currentYear; year++) {
				this.years.push(year.toString());
			}
			this.currentYearIndex = currentYear - 1900;
		},
		mounted() {
			this.foodCategoryListData();
			this.scrollHeight = uni.getSystemInfoSync().screenHeight - 180
		},
		methods:{ 
			selectedDate(e){
				// this.checkTimeArr = e.value
				// this.checkTimeStr = e.value[0] + '至' + e.value[1]
				if(e.value[0] != undefined && e.value[1] != undefined) {
					this.checkTimeArr = e.value
					this.checkTimeStr = e.value[0] + '至' + e.value[1]
				}
			},
			bindPickerChange(e) {
				this.selectedYear = this.years[e.target.value];
				this.currentYearIndex = e.target.value;
				console.log('selectedYear', this.selectedYear)
			},
			async foodCategoryListData() {
				const res = await  uni.$api.foodCategoryList(); 
				if(res.data.code == 0) {
					this.foodCategoryList = res.data.data;
				}
			},
			cancellation(){
				//取消  
				this.$emit('seacharResult', {search:false});
			},
			clearAllParams(){
				//清空所有内容
				this.companyName = '';
				this.foodCategory = '';
				this.claimStatus = '';
				this.sampleMode = '';
				this.logOffState = '';
				this.coverStatus = '';
				this.selectedYear = '';
				this.operationStartDate = '';
				this.endDateOfOperationDate = '';
			},
			confirmBtn(){
				//确定  
				this.$emit('seacharResult', {
					search:true,
					companyName: this.companyName,
					processCodeTwo: this.foodCategory,
					claimStatus: this.claimStatus,
					checkStatus: this.sampleMode,
					cancellationStatus: this.logOffState,
					coverStatus: this.coverStatus,
					year: this.selectedYear,
					startTime: this.operationStartDate,
					endTime: this.endDateOfOperationDate
				});
			}
		}
	}
</script>

<style  lang="scss">
	.popupContent {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0; 
		.uni-datetime-picker {
			width: 100%;
		}

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: url('../static/img/popupTitle.png') no-repeat center center;
			background-size: cover;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-indent: 45rpx;
		}

		.ul { 
			overflow-y: auto;
			padding-bottom: 100px;
			.li {
				padding: 0 45rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 68rpx;
				line-height: 68rpx;
				border-bottom: 1px solid #d6d6d6;

				.left {
					font-size: 21rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					width: 200rpx;
					color: #333333;
					display: flex;
					justify-content: flex-start;
				}

				.right {
					width: 530rpx;
					
					input {
						font-size: 21rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						width: 460rpx;
						text-indent: 20rpx;
					}

					.placeholder-class {
						color: #999999;
					}

					.uni-stat__select {
						width: 460rpx;

						/deep/.uni-select {
							border: none;
							padding: 0;
						}
					}

					.uni-date {
						width: 460rpx;

						/deep/.uni-date-editor--x {
							border: none;
						}
					}
					
					/deep/.uni-select {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: left;
					}
					
					/deep/.uni-select__selector {
						padding: 0;
					}
					
					/deep/.uni-select__input-placeholder {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					
					/deep/.uni-select__selector-item {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 5px 10px !important;
						text-align: left !important;
						line-height: 1.6 !important;
					}
					
					/deep/.uni-select__input-box {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 100%;
					}
					
					/deep/.uni-select__input-box view:last-child {
						display: flex;
					}
					
					/deep/.uni-select__selector-empty {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					
					.picker {
						font-size: 12px;
					}
				}

				&:nth-child(odd) {
					background: #F9F9F9;
				}

				&:last-child {
					border-bottom: none;
				}
			}

			.li:last-child {
				/deep/.uni-select__selector {
					top: initial;
				}

				/deep/.uni-popper__arrow {
					display: none;
				}
			}
		}
 
	}
	.button{
		display: flex;
		flex-direction: row;
		height: 80px;
		width: 600rpx;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0px;
		background-color: #ffffff;
	}
	.determine{ 
		width: 189px;
		height: 38px;
		line-height: 38px;
		background: #0552A9;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;  
		box-sizing: border-box;
		font-size: 10px;
		color: #ffffff;
		text-align: center;  
		border-radius: 5px; 
		cursor: pointer;
	}
	.cancellation{ 
		width: 189px;
		height: 38px;
		line-height: 38px; 
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;  
		box-sizing: border-box;
		font-size: 10px;
		text-align: center;  
		border-radius: 5px; 
		cursor: pointer;
		border: 1px solid #979797;
		color: #979797;
	 
	}
	.uni-date-x{
		height: 40px;
	}
	.uni-date-editor--x{
		height: 40px;
	}
	
	/deep/.uni-select__selector {
		width: calc(100% + 30px) !important;
	}
	
	/deep/.uni-select__selector-scroll {
		width: calc(100% + 30px) !important;
	}
</style>